<template>
  <div >
<top-header title="市集" ></top-header>
<div class="s">
 <a-carousel autoplay>
    <div v-for="(item, index) in lunbotu" :key="index">
      <img :src="getImage(item.img)" alt="" />
      </div>
  </a-carousel>
  </div>
  <div class="type-header">
    <ul>
      <li v-for="(item,index) in typelist" :key="index" @click="selectfoodstype(index,item)" :class="[index == num ? 'add' : '']">
        <p>{{item}}</p>
      </li>
      </ul>
  </div> 
  <div class="type-content">
    <div v-for="(i,index) in foodtypelist" :key="index" @click="goto(i)">
      <div v-if="i.hasOwnProperty('rich_text_goods_cell') == true">
     <img :src="getImage(url+i.rich_text_goods_cell.goods.image.ident)" alt="">
     <p class="name">{{i.rich_text_goods_cell.goods.name}}</p>
     <p class="foreword">{{i.rich_text_goods_cell.goods.foreword}}</p>
     <div class="totle">
     <p class="display_price">￥{{i.rich_text_goods_cell.goods.display_price}}<span v-if="i.rich_text_goods_cell.goods.display_original_price != ''">￥<span>{{i.rich_text_goods_cell.goods.display_original_price}}</span></span></p>
     <p class="sales">已售<span>{{i.rich_text_goods_cell.goods.display_total_sales_volume}}</span></p>
    </div></div>
    <div v-else>
      <img :src="getImage(url+i.rich_text_post_cell.image.ident)" alt="">
      <p class="name">{{i.rich_text_post_cell.post.title}}</p>
      <p class="icon"><img :src="getImage(i.rich_text_post_cell.post.author.photo)" alt="">
      <span>{{i.rich_text_post_cell.post.author.name}}</span></p>
    </div>
    </div>
  </div>
  </div>
 
</template>

<script>
import TopHeader from '../components/TopHeader.vue';

export default {
  components: { TopHeader },
data() {
  return {
    typelist:'',
    num:0,
    foodtypelist:'',
    name:'',
    url:'https://i2.chuimg.com/',
    lunbotu:'',
    title:'',
    goods:{}
  }
},

methods: {
  goto(i){
    if(i.hasOwnProperty('rich_text_goods_cell') == true){
     this.name = i.rich_text_goods_cell.goods.name
     console.log(this.name)
     }else{
       this.title = i.rich_text_post_cell.post.title
       console.log(this.title)
     }
    console.log(this.foodtypelist)
    this.$http.post('/api/getgoodcontent',{
      params:{
        name:this.name
      }
    }).then((res)=>{
      console.log(res.data.content)
    //   this.goods = res.data.content
    //  console.log(this.goods)
       this.$store.dispatch('getgoods',res.data.content);
         this.$router.push({name:'GoodContent' })
    })
  },
  getlunbotu(){
      this.$ajax.get('http://localhost/mysql/lunbotu.php')
      .then((res)=>{
        console.log(res.data)
          this.lunbotu = res.data
      })
    },
  gettypelist(){
    this.$http.get('/api/gettype').then((res)=>{
      console.log(res.data.data.typelist.content.data)
      this.typelist = res.data.data.typelist.content.data
    })
  },
   selectfoodstype(index = 0,item = '推荐') {
     this.num = index
     this.name = item
     console.log(this.name)
      this.$http
        .post("/api/getfoodtype", {
          params: {
              name: item,
          },
        })
        .then(
          (res) => {
           console.log(res.data.content.cells);
            this.foodtypelist = res.data.content.cells
          },
          (err) => {}
        );
    },
       getImage(url){
    // console.log(url);
    if(url !== undefined){
          return url.replace(/^(http)[s]*(\:\/\/)/,'https://images.weserv.nl/?url=');
    }
}
},
created(){
    this.getlunbotu();
  this.gettypelist();
  this.selectfoodstype();
},

}

</script>
<style lang="scss" scoped>
.s{
  margin-top: 60px;
}
.banner {
  .ant-carousel /deep/ .slick-slide {
    text-align: center;
    height: 200px;
    overflow: hidden;
  }
}
img {
  width: 100%;
  height: 200px;
  background-repeat: no-repeat;
}
.type-header{


  width: 375.2px;
  ul{
    display: flex;
    font-size: 15px;
    width: 100%;
    overflow-y: scroll;
    white-space: nowrap;
    padding: 0;

			li {
       height: 100%;
       width: 100rpx;
       margin:5px 0;
      list-style-type :none;
			padding: 5px 10px;
			}
  }
}
.type-content{
  margin-bottom: $tabbar-height;
  p{
    padding: 0 10px;
  }
}
.add {
    color: green;
  }
  .totle{
    display: flex;
    justify-content: space-between;
    .display_price{
      color: red;
      span{
        margin-left: 5px;
        color: gray;
         text-decoration:line-through;
      }
    }
  }
  .sales{
    color: gray;
  }
  .icon{
     margin-bottom: 20px;
    img{
      width: 20px;
    height: 20px;
    }
    span{
      margin-left: 10px;
    }
  }
  .name{
    font-size: 18px;
    font-weight: bold;
  }
</style>